<template>
    <element-main>
        <!-- 查询功能-->
        <template>
            <element-search >
                <el-form ref="searchForm" :model="searchForm" id="userSearch" :inline="true">
                    <slot></slot>
                    <el-form-item>
                        <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="info" circle @click="onSearch"></el-button>
                    </el-form-item>
                    <el-form-item style="float: right">
                        <el-button type="danger" icon="el-icon-delete" title="删除" @click="onDelete" circle></el-button>
                    </el-form-item>
                    <el-form-item style="float: right">
                        <el-button type="success" icon="el-icon-plus" title="新增" @click="onAdd" circle></el-button>
                    </el-form-item>
                </el-form>
            </element-search>
        </template>
        <!--表格列表 -->
        <element-table :api="api" :tableHeader="tableHeader" id="userTable" ref="element_table" :params="searchForm"
                       border @selection-change="onHandleSelectionChange">
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" title="删除" @click="onDelete" circle></el-button>
                </template>
            </el-table-column>
        </element-table>
        <!--弹出编辑框-->
        <el-dialog :title="editTitle" top="3%" :visible.sync="dataDialog.visible" class="standard-dialog">
            <el-form :model="dataDialog.data" :rules="dataDialog.rules" ref="dataDialogForm" label-width="100px" :disabled="dataDialog.disabled">
                <el-form-item label="用户名：" placeholder="请输入用户名" prop="userName">
                    <el-input type="text" v-model="dataDialog.data.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码：" placeholder="请输入密码" prop="password">
                    <el-input type="text" v-model="dataDialog.data.password"></el-input>
                </el-form-item>
                <el-form-item label="电话：" placeholder="请输入电话" prop="phone">
                    <el-input type="text" v-model="dataDialog.data.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" icon="el-icon-check" @click="saveData" title="保存" v-if="!dataDialog.disabled" ></el-button>
                <el-button @click="resetProductMes()" icon="el-icon-refresh" title="重置" v-if="dataDialog.isVisible"></el-button>
            </span>
        </el-dialog>
    </element-main>
</template>
<script>
    import  httpclient from 'httpclient';
    export default {
        data: function () {
            return {
                editTitle: "编辑用户",
                api: api.BASE.USER.LIST,//列表api
                tableHeader: [
                    {"prop": "userName", "label": "用户名"},
                    {"prop": "password", "label": "密码"},
                    {"prop": "phone", "label": "电话"}
                ],
                detailSlider: {//修改对象
                    data: {}
                },
                searchForm: {//查询条件
                    name: ""
                },
                //产品信息编辑对话框
                dataDialog: {
                    visible: false, //显示开关
                    isVisible:false,//是否显示重置按钮,新增有重置按钮
                    data: {},//传参数据
                    rules: {
                        userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                    },
                    disabled:false //是否禁用
                },
            };
        },

        methods: {
            resetProductMes() {
                this.dataDialog.data={};
                this.$refs.dataDialogForm.resetFields();
            },//重置表单
            onSearch() {//刷新数据
                this.$refs.element_table.loadData();
            },
            onHandleSelectionChange(data) {
                if (null !== data) {
                    this.dataDialog.data = data;
                }

            },
            onDelete() {//调用删除产品接口
                const that = this;
                if (that.dataDialog.data.length > 0) {
                    that.$confirm('此操作将删除该产品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let ids = [];
                        that.dataDialog.data.forEach(function (data) {
                            ids.push(data.id);
                        });

                        let params = new URLSearchParams();
                        params.append("idsList", ids);

                        httpclient.postJson(api.BASE.USER.DEL, params).done((res) => {
                            if (res.code === 1) {
                                that.onSearch();
                                httpclient.errorPage("success", "删除成功", true);
                            } else {
                                httpclient.errorPage("error", "获取数据失败", true);
                            }
                        }).fail((error) => {
                            httpclient.errorPage("error", error.errorMsg, true);
                        });
                    }).catch(() => {
                        httpclient.errorPage("warning", "取消删除", true);
                    });
                } else {
                    httpclient.errorPage("error", "请先选择一条数据", true);
                }
            },
            saveData() {//保存产品
                this.$refs['dataDialogForm'].validate((valid) => {//element表单验证
                    if (valid) {//如果验证通过
                        if(this.dataDialog.isVisible){
                            httpclient.post(api.BASE.USER.ADD,this.dataDialog.data).done((res) => {
                                if (res.code === 1) {
                                    this.onSearch();
                                    httpclient.errorPage("success", "保存成功", true);
                                    this.dataDialog.visible = false;
                                } else {
                                    httpclient.errorPage("error", "获取数据失败", true);
                                }
                            }).fail((error) => {
                                httpclient.errorPage("error", error.errorMsg, true);
                            });
                        }else{
                            this.detailSlider.data.id = this.dataDialog.data.id;
                            this.detailSlider.data.name = this.dataDialog.data.name;
                            this.detailSlider.data.code = this.dataDialog.data.code;
                            httpclient.post(api.BASE.ROLE.ADD_ROLE,this.detailSlider.data).done((res) => {
                                if (res.code === 1) {
                                    this.onSearch();
                                    httpclient.errorPage("success", "修改成功", true);
                                    this.dataDialog.visible = false;
                                } else {
                                    httpclient.errorPage("error", "获取数据失败", true);
                                }
                            }).fail((error) => {
                                httpclient.errorPage("error", error.errorMsg, true);
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            onAdd() {//点击新增产品
                this.dataDialog.data={};
                this.editTitle = "新增用户";
                this.dataDialog.visible = true;
                this.dataDialog.isVisible = true;
            },
            onEdit() {//点击编辑按钮
                if ($(".el-table__row").hasClass("current-row")) {
                    const id = this.dataDialog.data.id;
                    this.editTitle = "编辑用户";
                    this.dataDialog.disabled = false;
                    //查询是为了从后台数据最新的数据
                    httpclient.post(api.BASE.USER.FIND_ONE,{id:id}).done((res) => {
                        if (res.code === 1) {
                            this.dataDialog.data = res.data;
                            this.dataDialog.visible = true;
                            this.onSearch();
                        } else {
                            httpclient.errorPage("error", "获取数据失败", true);
                        }
                    }).fail((error) => {
                        httpclient.errorPage("error", error.errorMsg, true);
                    });
                } else {
                    httpclient.errorPage("error", "请先选择修改数据", true);
                }
            },
            onShow() {//点击查看按钮
                if ($(".el-table__row").hasClass("current-row")) {
                    const id = this.dataDialog.data.id;
                    this.dataDialog.disabled = true;
                    this.editTitle = "查看用户";
                    //查询是为了从后台数据最新的数据
                    httpclient.post(api.BASE.USER.FIND_ONE,{id:id}).done((res) => {
                        if (res.code === 1) {
                            this.dataDialog.data = res.data;
                            this.dataDialog.visible = true;
                        } else {
                            httpclient.errorPage("error", "获取数据失败", true);
                        }
                    }).fail((error) => {
                        httpclient.errorPage("error", error.errorMsg, true);
                    });
                } else {
                    httpclient.errorPage("error", "请先选择一条数据", true);
                }
            },
        }
    };
</script>

